<template>
  <div>
    <div class="main" v-if="list.title.indexOf('油') != -1">
      >
      <img src="@/assets/images/citizen/ggoil.png" alt />
      <div class="content">
        <p class="pone">{{list.title}}</p>
        <!-- <p class="two">13646933194</p> -->
        <p class="third">{{list.createTime}}</p>
      </div>
    </div>
    <div class="main" v-if="list.title.indexOf('话费') != -1">
      <img src="@/assets/images/citizen/ggphone.png" alt />
      <div class="content">
        <p class="pone">{{list.title}}</p>
        <p class="two">{{list.telphone}}</p>
        <p class="third">{{list.createTime}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.$http
      .post('oneYuanPurchase/myOrders', {
        type: '2',
        idCardNo: localStorage.getItem('haveId'),
        username: localStorage.getItem('haveName'),
        telphone: localStorage.getItem('haveNum')
        // bankUserId: localStorage.getItem('message')
      })
      .then(res => {
        console.log(res);
        this.list = res.data.object[0];
        console.log(this.list);
      });
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 690px;
  height: 216px;
  background-color: #ffffff;
  box-shadow: 0px 2px 9px 0px rgba(201, 202, 202, 0.57);
  border-radius: 8px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
  img {
    padding-left: 20px;
    align-self: center;
    width: 30%;
    height: 180px;
  }
  .content {
    width: 80%;
    align-self: center;
    padding-left: 30px;
    .pone {
      font-size: 28px;
      color: #3b3b3b;
    }
    .two {
      font-size: 26px;
      color: #000000;
      margin-top: 20px;
    }
    .third {
      font-size: 26px;
      color: #7f7d7d;
      margin-top: 20px;
    }
  }
}
</style>